// 轮播图容器
const container = document.querySelector('#my-slider')

// 图片节点数组
const items = document.querySelectorAll('.slider-list__item, .slider-list__item--selected')

// 上一个
const prev = document.querySelector('.slide-list__previous')

// 下一个
const next = document.querySelector('.slide-list__next')

// 控制点容器
const controller = document.querySelector('.slide-list__control')

// 每个控制点的节点数组
const buttons = document.querySelectorAll('.slide-list__control-buttons, .slide-list__control-buttons--selected')

// 当前要显示的的索引
let currentIdx = 0

// 自动切换时间间隔
const circle = 2000

// 定时器指针
let timer = null

// 切换上一张
function slidePrev() {
  const len = items.length
  currentIdx = (len + currentIdx - 1) % len
  doSlide()
}

// 切换下一张
function slideNext () {
  currentIdx = (currentIdx + 1) % items.length
  doSlide()
}

// 切换
function doSlide() {
  // console.log(currentIdx)

  // 切换控制点状态
  document.querySelector('.slide-list__control-buttons--selected').className = 'slide-list__control-buttons'
  buttons[currentIdx].className = 'slide-list__control-buttons--selected'

  // 切换图片状态
  const selected = document.querySelector('.slider-list__item--selected')
  selected.className = 'slider-list__item'
  const target = items[currentIdx]
  target.className = 'slider-list__item--selected'
}

// 开启定时器，自动切换
function start() {
  timer = window.setInterval(slideNext, circle)
}

// 停止定时器，停止自动切换
function stop() {
  window.clearInterval(timer)
}

// 点击上一个
prev.addEventListener('click', slidePrev)

// 点击下一个
next.addEventListener('click', slideNext)

// 鼠标移入下方控制点区域
controller.addEventListener('mouseover', evt => {
  // console.log('over')
  const idx = Array.from(buttons).indexOf(evt.target)
  if(idx >= 0) {
    // console.log(idx)
    currentIdx = idx
    doSlide()
  }
})

// 鼠标进入轮播图区域
container.addEventListener('mouseenter', evt => {
  evt.stopPropagation()
  console.log('in')
  stop()
})

// 鼠标移出轮播图区域
container.addEventListener('mouseleave', () => {
  console.log('out')
  start()
})

// 默认开始
start()
